<%--
  Created by IntelliJ IDEA.
  User: lv
  Date: 2018/8/3
  Time: 12:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../../static/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/plugins/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/static/plugins/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/static/plugins/animate/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/login.css" />
</head>
<body>
<div class="layui-layout-admin sc_login">
    <div class="sc_login_inner">
        <div class="sc_login_content">
            <div class="sc_login_right">
                <form method="post" id="form" class="layui-form">
                    <dl>
                        <dt>统一管理平台</dt>
                        <dd>
                            <label for="username">
                                <span class="icon"><i class="fa fa-user"></i></span>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" autocomplete="off" placeholder="用户名" datatype="s1-20" errormsg="用户名至少4个字符!" nullmsg="请输入用户名!" class="layui-input" />
                                </div>
                            </label>
                        </dd>
                        <dd>
                            <label for="password">
                                <span class="icon"><i class="fa fa-key"></i></span>
                                <div class="layui-input-inline">
                                    <input type="password" name="password" autocomplete="off" placeholder="密码" datatype="s1-20" errormsg="" nullmsg="请输入密码!" class="layui-input" />
                                </div>
                            </label>
                        </dd>
                        <dd>
                            <label for="imagecode">
                                <span class="icon"><i class="fa fa-key"></i></span>
                                <div class="layui-input-inline">
                                    <input type="text" name="imageCode" placeholder="验证码" autocomplete="off"  datatype="*4-4" errormsg="验证码个数" nullmsg="请输入验证码!" class="layui-input" style="width: 200px;"/>
                                </div>
                                <div class="layui-input-inline">
                                    <label><img type="image" src="loadCodeImage" id="codeImage" onclick="changeCode()" title="换一张" style="cursor:pointer;"/></label>
                                </div>
                            </label>
                        </dd>
                        <dd>
                            <p>
                                <button class="layui-btn">登 录</button>
                            </p>
                        </dd>
                    </dl>
                </form>
            </div>
            <div class="sc_login_left"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${ctx}/static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="${ctx}/static/js/validform.js"></script>

<script>
    layui.use(['form', 'layer','table','laydate'], function() {
        form = layui.form;
        layer = layui.layer;
        table = layui.table;
        laydate = layui.laydate;


        //表单验证
        $(".layui-form").Validform({
            tiptype:3,
            ajaxPost:true,
            callback:function(data){

                var index;
                $.ajax({
                    type: 'POST',
                    url: "login.json",
                    data: $("#form").serialize(),
                    beforeSend: function () {
                        index = layer.msg('Loading', {icon: 16,shade: 0.2,time:false});
                    },
                    success: function(result) {
                        layer.close(index);
                        if(result.code==200){
                            layer.msg(result.message, {icon: 6,time: 3000});
                        }
                        else {
                            layer.msg(result.message, {icon: 5,time: 3000});
                        }
                    },
                    dataType: "json"
                });
            }
        });

    });

    /**
     *
     */
    function changeCode(){
        $('#codeImage').attr('src','loadCodeImage?token='+Math.random());
    }

</script>
</body>
</html>
